<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handlerTabClick">
      <el-tab-pane label="用户管理" name="first">
        <ManagerTable>
          <template v-slot:pass="scope">
            <UserTable :data="pass" :search="scope.search" :isAll="isAll"></UserTable>
          </template>
          <template v-slot:apply="scope">
            <UserTable :data="apply" :search="scope.search" :isAll="!isAll"></UserTable>
          </template>
          <template v-slot:ban="scope">
            <UserTable :data="ban" :search="scope.search" :isAll="!isAll"></UserTable>
          </template>
        </ManagerTable>
      </el-tab-pane>
      <el-tab-pane label="店铺管理" name="second">
        <ManagerTable>
          <template v-slot:pass="scope">
            <BusinessTable :data="pass" :search="scope.search" :isAll="isAll"></BusinessTable>
          </template>
          <template v-slot:apply="scope">
            <BusinessTable :data="apply" :search="scope.search" :isAll="!isAll"></BusinessTable>
          </template>
          <template v-slot:ban="scope">
            <BusinessTable :data="ban" :search="scope.search" :isAll="!isAll"></BusinessTable>
          </template>
        </ManagerTable>
      </el-tab-pane>
      <el-tab-pane label="商品管理" name="third">
        <ManagerTable>
          <template v-slot:pass="scope">
            <ProductTable :data="pass" :search="scope.search" :isAll="isAll"></ProductTable>
          </template>
          <template v-slot:apply="scope">
            <ProductTable :data="apply" :search="scope.search" :isAll="!isAll"></ProductTable>
          </template>
          <template v-slot:ban="scope">
            <ProductTable :data="ban" :search="scope.search" :isAll="!isAll"></ProductTable>
          </template>
        </ManagerTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ManagerTable from '@/components/manager/managerTable'
import UserTable from '@/components/manager/userTable'
import BusinessTable from '@/components/manager/businessTable'
import ProductTable from '@/components/manager/productTable'
export default {
  name: "manager",
  components: {ManagerTable, UserTable, BusinessTable, ProductTable},
  data() {
    return {
      activeName: 'first',
      data: [],
      isAll: true,
    }
  },
  methods: {
    handlerTabClick(tab){
      if(tab.name === 'first'){
        this.getUser()
      } else if(tab.name === 'second'){
        this.getBusiness()
      } else if(tab.name === 'third'){
        this.getGoods()
      }
    },
    getUser(){
      console.log("GetUser")
      this.request('/users')
    },
    getBusiness(){
      console.log("GetBusiness")
      this.request('/businesses')
    },
    getGoods(){
      console.log("GetGoods")
      this.request('/goods')
    },
    request(url){
      const userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
      this.$axios.post(url, userInfo, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        this.data = res.data.data
      })
    },
    changePass(url, data){
      this.$axios.post(url, data, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        const val = res.data.data
        this.data.forEach(data => {
          if(data.id === val.id){
            data.pass = val.pass
          }
        })
      })
    }
  },
  computed: {
    pass(){
      return this.data.filter(val => {
        return val.pass === 1 || val.pass === 2
      })
    },
    apply(){
      return this.data.filter(val => {
        return val.pass === 0
      })
    },
    ban(){
      return this.data.filter(val => {
        return val.pass === -1
      })
    }
  },
  mounted() {
    this.$bus.$on('changeUserPass', (data) => {
      this.changePass('/userPass', data)
    })
    this.$bus.$on('changeBusinessPass', (data) => {
      this.changePass('/businessPass', data)
    })
    this.$bus.$on('changeProductPass', (data) => {
      this.changePass('/goodsPass', data)
    })
  },
  created() {
    this.handlerTabClick({name: this.activeName})
  }
}
</script>

<style scoped>
.container{
  max-width: 960px;
  margin: 0 auto;
}
</style>